<template>
  <!-- 员工页面 -->

  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <template #header>
          <el-row type="flex" justify="end">
            <el-button size="small" type="primary" @click="addFn">添加员工</el-button>
          </el-row>
        </template>

        <!-- 表格 -->
        <el-table border :data="employeeList">
          <el-table-column label="用户名" prop="username" />
          <el-table-column label="邮箱" prop="email" />
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button size="small" type="primary" @click="assignRole(row.id)">设置角色</el-button>
              <el-button size="small" type="success" @click="editFn(row.id)">编辑</el-button>
              <el-button size="small" type="danger" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination
            :page-size="page.limit"
            layout="total, prev, pager, next"
            :total="total"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>
      <!-- 新增/编辑 弹窗 -->
      <AddEmployee
        ref="employee"
        :is-show="isShow"
        :show-dialog.sync="showDialog"
        @updateEvent="getEmployeesList"
      />

      <!-- 设置角色 -->
      <AssignRole
        ref="assignRole"
        :show-dialog.sync="AssignRoleDialog"
      />
    </div>
  </div>
</template>

<script>
import { employeesList, employeesCount, delEmployee } from '@/api/employees'
import AddEmployee from './components/addEmployee.vue'
import AssignRole from './components/assign-role.vue'
export default {
  components: { AddEmployee, AssignRole },
  data() {
    return {
      employeeList: [], // 员工数据列表
      total: 0, // 员工总数
      page: {
        limit: 5, // 每页的获取条数
        start: 0 // 开始获取的位置
      },
      showDialog: false, // 控制 新增/编辑 弹窗组件显示隐藏
      countPage: '',
      isShow: true, // 是否为编辑弹窗
      AssignRoleDialog: false // 控制分配角色弹窗显示隐藏
    }
  },
  created() {
    // 获取员工列表
    this.getEmployeesList()
  },
  methods: {
    // 获取员工列表
    async getEmployeesList() {
      const res = await employeesList(this.page)
      // console.log(81, res)
      // 保存员工列表
      this.employeeList = res.data
      // 如果直接把获取角色数量的函数写在created中会出现数据改变而分页却不会变的问题 因此写在这
      // 获取员工数量
      const result = await employeesCount()
      // 保存员工数量
      this.total = result.data
    },

    // 分页功能
    currentChange(page) {
      // console.log(page)
      this.countPage = page
      // 计算出每一页的第一条数据开始的位置
      this.page.start = (page - 1) * this.page.limit
      this.getEmployeesList()
    },

    // 添加员工
    addFn() {
      this.showDialog = true
      this.isShow = false
    },

    // 删除员工
    delFn(id) {
      this.$confirm('确定要删除这条数据？', '提示', {
        type: 'warning'
      }).then(async() => {
        // 提示点击确定 调用接口
        await delEmployee(id)
        // 判断删除的数据是否为最后一页的最后一条 是 页码-1
        if (this.employeeList.length === 1 && this.page.start !== 0) {
          this.currentChange(this.countPage - 1)
        }
        // 更新数据
        this.getEmployeesList()
      }).catch(err => {
        console.log('取消', err)
      })
    },

    // 编辑员工--弹窗数据回显
    async editFn(id) {
      this.showDialog = true
      this.isShow = true
      // 数据回显
      // 在子组件中封装获取详情的接口，然后通过ref来调用
      this.$refs.employee.getPersonalInfo(id)
    },

    // 分配角色
    assignRole(id) {
      this.AssignRoleDialog = true
      // 在子组件中封装获取员工信息的接口，然后通过ref来调用
      this.$refs.assignRole.getRoleId(id)
    }
  }
}
</script>

<style>

</style>
